<template>
    <FormProvider :form="form">
      <ObjectField name="object">
        <template #default="{ field }">
          <div
            v-for="key in Object.keys(field.value || {})"
            :key="key"
            :style="{ marginBottom: '10px' }"
          >
            <Space>
              <Field :name="key" :component="[Input, { placeholder: key }]" />
              <Button @click="field.removeProperty(key)"> Remove </Button>
            </Space>
          </div>
          <Space>
            <Field
              name="propertyName"
              basePath=""
              required
              :component="[Input, { placeholder: 'Property Name' }]"
            />
            <Button @click="addPropertyToField(field)"> Add </Button>
          </Space>
        </template>
      </ObjectField>
      <!-- 添加提交按钮 -->
      <Button @click="submitForm">Submit</Button>
    </FormProvider>
  </template>
  
  <script setup>
  import { Input, Space, Button } from 'ant-design-vue';
  import { createForm } from '@formily/core';
  import { FormProvider, ObjectField, Field } from '@formily/vue';
  import 'ant-design-vue/dist/antd.css';
  
  // 创建表单实例
  const form = createForm();
  
  // 定义添加属性的方法
  const addPropertyToField = (field) => {
    const name = form.values.propertyName;
    if (name && !form.existValuesIn(`object.${name}`)) {
      field.addProperty(name, '');
      form.deleteValuesIn('propertyName');
    }
  };
  
  // 定义提交表单的方法
  const submitForm = () => {
    form.submit((values) => {
      console.log('表单提交的数据:', values);
    });
  };
  </script>